<template>
 
  <el-dialog :title="(article && article.articleName) || '文章预览'" :visible.sync="localVisible" width="80%">
    <div slot="content" v-if="article" class="preview-container">
      <h2 class="preview-title">{{formatDate(article.publishTime) }}</h2>
      <p>发布时间：{{  formatDate(article.publishTime) }}</p>
      <div class="preview-content" v-html="article.content"></div> 
    </div>
    <div class="dialog-footer">
        <el-button @click="closeDialog" type="primary">
          返回
        </el-button>
      </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'recommendArticlePreview',
  props: {
    article: {
      type: Object,
      required: true,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      required: true,
      default:false
    }
  },
  data() {
    return {
      //本地创建副本
      localVisible: this.visible
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val;
    }
  },
  methods: {
    closeDialog() {
      this.localVisible = false;
      this.$emit('update:visible', false);
    },
     formatDate(date) {
      if (!date) return '';
      return new Date(date).toLocaleString();
    }
  },
}
</script>

<style scoped>
.preview-container {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.preview-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

.preview-content {
  line-height: 1.8;
  margin-bottom: 20px;
}

.preview-image {
  text-align: center;
  margin-bottom: 20px;
}

.preview-image img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-start;
  padding: 20px;
}
</style>